<template>
  <div class="drawer" :style="{ right: open ? '0px' : '-600px' }">
    <div class="flex title flexColCenter">
      <i class="el-icon-close shou" @click="cancel"></i>
      <div>输入规范</div>
    </div>
    <div class="contain flex">
      <!-- 左侧 -->
      <div class="left">
        <div
          :class="['nav', 'shou', curNav == item.key ? 'activeNav' : '']"
          v-for="(item, index) in nav"
          :key="index"
          @click="curNav = item.key"
        >
          {{ item.key }}
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="right_title flexBet">
          <div class="type">【{{ curNav }}】</div>
          <div class="btn" v-if="curNav != '注意事项'" @click="into">
            插入示例
          </div>
        </div>
        <div class="right_content" v-if="curNav == '单选题'">
          <div class="topicTitle">1.【单选题】教育学的研究对象是（ ）</div>
          <div class="topicOption">A.学校教育现象</div>
          <div class="topicOption">B.家庭教育现象</div>
          <div class="topicOption">C.社会教育现象</div>
          <div class="topicOption">D.个体的主观能动性</div>
          <div class="topicAnswer">答案：A</div>
          <div class="topicAnswer">难度：不限难度</div>
          <div class="topicAnswer">解析：教育学的研究对象答案解析</div>
          <div class="topicAnswer">
            输入要求：
            单选题选项内容不可重复，且选项与选项之间不要有空行。答案录入格式：“‘答案：’+答案内容”（如：答案：A）。
          </div>
        </div>
        <div class="right_content" v-if="curNav == '多选题'">
          <div class="topicTitle">1.【多选题】题目示例：教育现象包括？</div>
          <div class="topicOption">A.学校教育</div>
          <div class="topicOption">B.家庭教育</div>
          <div class="topicOption">C.社会教育</div>
          <div class="topicOption">D.模仿行为</div>
          <div class="topicOption">E.遗传</div>
          <div class="topicAnswer">答案：ABC</div>
          <div class="topicAnswer">难度：简单</div>
          <div class="topicAnswer">解析：教育学的研究对象答案解析</div>
          <div class="topicAnswer">
            输入要求：
            多选题选项内容不可重复，且选项与选项之间不要有空行。答案格式：“‘答案：’+答案内容”（如：答案：ABC）。
          </div>
        </div>
        <div class="right_content" v-if="curNav == '填空题'">
          <div class="topicTitle">
            1.【填空题】昆体良是古罗马著名的___和___，其巨著《___》系统地总结了___学校教育、教学的实践经验。
          </div>

          <div class="topicAnswer">
            答案:{演说家$教育家}|雄辩术原理|古罗马&古希腊
          </div>
          <div class="topicAnswer">难度：中等</div>
          <div class="topicAnswer">解析：教育学的研究对象答案解析</div>
          <div class="topicAnswer">
            输入要求：
            题干中填空位置须用三个连续下划线___标明，答案若有多个空，用分号“|”隔开，如：答案：李白|白居易；如果一个填空有多个答案请用
            & 开隔，如果多个答案之间可以乱序，则用{}框起来，答案之间用$隔开。
          </div>
        </div>
        <div class="right_content" v-if="curNav == '判断题'">
          <div class="topicTitle">1.【判断题】孔子流传于世的著作是《学记》</div>
          <div class="topicAnswer">答案：错</div>
          <div class="topicAnswer">难度：困难</div>
          <div class="topicAnswer">解析：教育学的研究对象答案解析</div>
          <div class="topicAnswer">
            输入要求： 答案支持对/错 或者 正确/错误 或者 yes/no 或者 是/不是。
          </div>
        </div>
        <div class="right_content" v-if="curNav == '简答题'">
          <div class="topicTitle">
            1.【简答题】简述维果斯基的“最近发展区理论”。
          </div>
          <div class="topicAnswer">
            答案：维果斯基的“最近发展区理论”，认为学生的发展有两种水平：一种是学生的现有水平，指独立活动时所能达到的解决问题的水平；另一种是学生可能的发展水平，也就是通过教学所获得的潜力。两者之间的差异就是最近发展区。
          </div>
          <div class="topicAnswer">难度：简单</div>
          <div class="topicAnswer">解析：教育学的研究对象答案解析</div>
        </div>
        <div class="right_content" v-if="curNav == '操作题'">
          <div class="topicTitle">
            1.【操作题】小陆所在的公司承接社区的物联网项目建设，其中包括一套道路路灯智能控制系统。客户希望该系统能够根据光照情况进行灯光智能化控制，但对反应时间要求不高，希望尽量不要占用本地服务资源。小陆根据客户需求建议采用LoRa通信方式采集光照传感信息，通过物联网网关连接云平台，在云平台上设置策略，实现灯光智能控制。请完成道路路灯智能控制系统的设备安装与连线、系统配置与调试。
          </div>
          <div class="topicAnswer">答案：略</div>
          <div class="topicAnswer">难度：简单</div>
          <div class="topicAnswer">
            解析：1.正确配置LoRa DTU节点设备。
            2.正确安装、配置光照度变送器设备。
          </div>
        </div>
        <div class="right_content" v-if="curNav == '注意事项'">
          <div class="topicTitle">
            <div>
              1、题型分为单选题、多选题、判断题、填空题、简答题、操作题。
            </div>
            <div>2、难度分为简单、中等、困难、不限难度。</div>
            <div>
              3、客观题（包括单选、多选、判断、填空）题型、题干（包括选项）、难度、答案必填，解析非必填。
            </div>
            <div>
              4、主观题（包括简答题、操作题）题型、题干、难度必填，解析、答案非必填。
            </div>
            <div>5、试题不需要有序号，系统会自动进行排序。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    open: Boolean
  },
  data() {
    return {
      curNav: '单选题',
      nav: [
        {
          key: '单选题',
          txt: '<p>1. 【单选题】</p><p>A.</p><p>B.</p><p>C.</p><p>D.</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        {
          key: '多选题',
          txt: '<p>1. 【多选题】</p><p>A.</p><p>B.</p><p>C.</p><p>D.</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        {
          key: '判断题',
          txt: '<p>1. 【判断题】</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        {
          key: '填空题',
          txt: '<p>1. 【填空题】</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        {
          key: '简答题',
          txt: '<p>1. 【简答题】</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        {
          key: '操作题',
          txt: '<p>1. 【操作题】</p><p>答案:</p><p>难度:</p><p>解析:</p>'
        },
        { key: '注意事项' }
      ]
    }
  },
  watch: {
    open(e) {
    }
  },
  methods: {
    into() {
      for (let index = 0; index < this.nav.length; index++) {
        if (this.nav[index].key == this.curNav) {
          this.$emit('out', this.nav[index].txt)
        }
      }
    },
    // 取消按钮
    cancel() {
      this.$emit('update:open', false)
    },

    /** 提交按钮 */
    submitForm: function() {
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
@import "../../../assets/styles/mixin.scss";

::v-deep .el-drawer {
}

.drawer {
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  width: 600px !important;
  height: 100%;
  background: white;
  position: fixed;
  z-index: 9999;
  top: 0;
}

.title {
  border-bottom: 1px solid #edeff0;
  height: 65px;
  padding-left: 24px;
  box-sizing: border-box;

  img {
    width: 16px;
    height: 16px;
  }

  div {
    margin-left: 48px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }
}

.contain {
  .left {
    width: 120px;
    box-sizing: border-box;
    padding: 11px 0 0 8px;
    border-right: 1px solid #edeff0;

    .nav {
      text-align: center;
      margin-bottom: 9px;
      width: 104px;
      height: 32px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 32px;
      font-style: normal;
    }

    .activeNav {
      @include plain_hover(rgba(155, 244, 219, 0.1), #28b28b, #ffffff) {
        width: 104px;
        height: 32px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 32px;
        text-align: left;
        font-style: normal;
        border-radius: 8px;
        border: 1px solid #28b28b;
      }

      &:hover {
        .btn_icon {
          color: #ffffff;
        }
      }

      &:active {
        .btn_icon {
          color: #ffffff;
        }
      }
    }
  }

  .right {
    flex: 1;
    box-sizing: border-box;
    padding: 11px 32px 0 21px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    line-height: 32px;
    text-align: left;
    font-style: normal;

    .right_title {
      .type {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 32px;
        font-style: normal;
      }

      .btn {
        @include plain_hover(rgba(155, 244, 219, 0.1), #28b28b, #ffffff) {
          width: 88px;
          height: 32px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 16px;
          line-height: 32px;
          text-align: left;
          font-style: normal;
          border-radius: 8px;
          border: 1px solid #28b28b;
        }

        &:hover {
          .btn_icon {
            color: #ffffff;
          }
        }

        &:active {
          .btn_icon {
            color: #ffffff;
          }
        }
      }
    }

    .right_content {
      .topicTitle {
        margin: 11px 0 20px 0;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .topicOption {
        margin-bottom: 10px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .topicAnswer {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .topicResolve {
      }

      .topicDiffcult {
      }
    }
  }
}
</style>
